<title>网站配置 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>
<!--tags插件css-->
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-tagsinput/jquery.tagsinput.min.css">
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">
<!--图片上传插件-->
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}js/webuploader/webuploader.css">
<!--图片查看器css-->
<link type="text/css" rel="stylesheet" href="{:HTTP_STATIC_ADMIN_CDN_URL}js/magnific-popup/magnific-popup.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header"><div class="card-title">网站配置</div></header>
                <div class="card-body">

                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <button class="nav-link active" id="basic-config" data-bs-toggle="tab" data-bs-target="#config" type="button" >基本</button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" id="basic-upload" data-bs-toggle="tab" data-bs-target="#upload" type="button">上传</button>
                        </li>
                    </ul>

                    <form class="example-from">
                        <div class="tab-content">
                            <!-- 基本设置 -->
                            <div class="tab-pane fade show active" id="config" aria-labelledby="basic-config">
                                <div class="form-group mb-3">
                                    <label for="web_site_title" class="form-label">网站标题</label>
                                    <input class="form-control" type="text" id="web_site_title" name="base[web_site_title]" value="{$options.base.web_site_title ?? ''}" placeholder="请输入站点标题" autocomplete="off" maxlength="50" />
                                </div>
                                <div class="form-group mb-3">
                                    <label class="form-label">LOGO图片</label>
                                    <div class="js-upload-image">
                                        <input type="hidden" name="base[web_site_logo]" data-name="web_site_logo" data-size="{$options.uploader.image_size ?? '0'}" data-ext='{$options.uploader.image_ext ?? "png"}' value="{$options.base.web_site_logo ?? ''}">
                                        <div id="picker_web_site_logo">上传LOGO图片</div>
                                        <!--ul用来存放图片预览-->
                                        <ul id="file_list_web_site_logo" class="list-inline row lyear-uploads-pic mb-0">
                                            {if condition="isset($options.base.web_site_logo) && $options.base.web_site_logo neq ''"}
                                            <li class="col-6 col-sm-3 col-md-2 list-images-item" id="WU_FILE_0">
                                                <figure>
                                                    <img src="{$options.base.web_site_logo}">
                                                    <figcaption>
                                                        <a class="btn btn-round btn-primary btn-link-pic" href="{$options.base.web_site_logo}">
                                                            <i class="mdi mdi-eye"></i>
                                                        </a>
                                                        <a class="btn btn-round btn-danger btn-remove-pic" href="#!">
                                                            <i class="mdi mdi-delete"></i>
                                                        </a>
                                                    </figcaption>
                                                </figure>
                                            </li>
                                            {/if}
                                        </ul>
                                    </div>
                                </div>
                                <div class="form-group mb-3">
                                    <label class="form-label">LOGO图片(带文字)</label>
                                    <div class="js-upload-image">
                                        <input type="hidden" name="base[web_site_logo_text]" data-name="web_site_logo_text" data-size="{$options.uploader.image_size ?? '0'}" data-ext='{$options.uploader.image_ext ?? "png"}' value="{$options.base.web_site_logo_text ?? ''}">
                                        <div id="picker_web_site_logo_text">上传LOGO图片</div>
                                        <!--ul用来存放图片预览-->
                                        <ul id="file_list_web_site_logo_text" class="list-inline row lyear-uploads-pic mb-0">
                                            {if condition="isset($options.base.web_site_logo_text) && $options.base.web_site_logo_text neq ''"}
                                            <li class="col-6 col-sm-3 col-md-2 list-images-item" id="WU_FILE_1">
                                                <figure>
                                                    <img src="{$options.base.web_site_logo_text}">
                                                    <figcaption>
                                                        <a class="btn btn-round btn-primary btn-link-pic" href="{$options.base.web_site_logo_text}">
                                                            <i class="mdi mdi-eye"></i>
                                                        </a>
                                                        <a class="btn btn-round btn-danger btn-remove-pic" href="#!">
                                                            <i class="mdi mdi-delete"></i>
                                                        </a>
                                                    </figcaption>
                                                </figure>
                                            </li>
                                            {/if}
                                        </ul>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="web_site_copyright" class="form-label">版权信息</label>
                                    <input class="form-control" type="text" id="web_site_copyright" name="base[web_site_copyright]" value="{$options.base.web_site_copyright ?? ''}" placeholder="请输入版权信息" autocomplete="off">
                                </div>
                                <div class="mb-3">
                                    <label for="web_site_icp" class="form-label">备案信息</label>
                                    <input class="form-control" type="text" id="web_site_icp" name="base[web_site_icp]" value="{$options.base.web_site_icp ?? ''}" placeholder="请输入备案信息" autocomplete="off">
                                </div>
                                <div>
                                    <button type="submit" class="btn btn-primary me-1">保 存</button>
                                </div>
                            </div>


                            <!-- 上传设置 -->
                            <div class="tab-pane fade" id="upload" aria-labelledby="basic-upload">
                                <div class="mb-3">
                                    <label class="form-label">上传模式</label>
                                    <div class="form-group controls-box clearfix">
                                        <div class="form-check form-check-inline">
                                            <input type="radio" id="upload_mode_1" data-options-name="" name="uploader[mode]" class="form-check-input upload_mode" value="1" {if condition="isset($options.uploader.mode) and $options.uploader.mode == 1"}checked{/if}>
                                            <label class="form-check-label" for="upload_mode_1">本地</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="radio" id="upload_mode_2" data-options-name="aliyun" name="uploader[mode]" class="form-check-input upload_mode" value="2" {if condition="isset($options.uploader.mode) and $options.uploader.mode == 2"}checked{/if}>
                                            <label class="form-check-label" for="upload_mode_2">阿里云(请自己写配置信息)</label>
                                        </div>
                                    </div>
                                </div>


                                <div class="mb-3">
                                    <label class="form-label">查看上传类型配置</label>
                                    <div class="form-group controls-box clearfix">
                                        <div class="form-check form-check-inline">
                                            <input type="radio" id="upload_type_file" name="upload_type" data-options-name="file" class="upload_type form-check-input upload_type" checked>
                                            <label class="form-check-label" for="upload_type_file">文件</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="radio" id="upload_type_image" name="upload_type" data-options-name="image" class="upload_type form-check-input upload_type">
                                            <label class="form-check-label" for="upload_type_image">图片</label>
                                        </div>
                                    </div>
                                </div>

                                <!-- 上传文件配置 -->
                                <div class="upload_types upload_types_file">
                                    <div class="form-group mb-3">
                                        <label for="upload_file_ext" class="form-label">允许上传的文件后缀</label>
                                        <input class="js-tags-input form-control" type="text" id="upload_file_ext" name="uploader[file_ext]" value="{$options.uploader.file_ext ?? ''}" autocomplete="off" >
                                        <small class="form-text">多个后缀用逗号隔开，不填写则不限制类型</small>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="upload_file_size" class="form-label">文件上传大小限制</label>
                                        <input class="form-control" type="text" id="upload_file_size" name="uploader[file_size]" value="{$options.uploader.file_size ?? '0'}" placeholder="请输入文件上传大小限制" autocomplete="off" >
                                        <small class="form-text">0为不限制大小，单位：b</small>
                                    </div>
                                </div>

                                <!-- 上传图片配置 -->
                                <div class="upload_types upload_types_image" style="display: none;">
                                    <div class="form-group mb-3">
                                        <label for="upload_image_ext" class="form-label">允许上传的图片后缀</label>
                                        <input class="js-tags-input form-control" type="text" id="upload_image_ext" name="uploader[image_ext]" value="{$options.uploader.image_ext ?? ''}" autocomplete="off" >
                                        <small class="form-text">多个后缀用逗号隔开，不填写则不限制类型</small>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="upload_image_size" class="form-label">图片上传大小限制</label>
                                        <input class="form-control" type="text" id="upload_image_size" name="uploader[image_size]" value="{$options.uploader.image_size ?? '0'}" placeholder="请输入图片上传大小限制" >
                                        <small class="form-text">0为不限制大小，单位：b</small>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>

                </div>
            </div>
        </div>

    </div>

</div>

<!--tags插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-tagsinput/jquery.tagsinput.min.js"></script>
<!--表单验证-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/messages_zh.min.js"></script>
<!--图片上传插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/webuploader/webuploader.min.js"></script>
<!--图片查看插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/magnific-popup/magnific-popup.min.js"></script>
<!--加载动画插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>
<script>
    $(function () {
        $('.example-from').submit(function () {
            event.preventDefault();
        });

        $('.upload_type').change(function(){
            let optionsName = $(this).data('options-name');
            $('.upload_types').hide();
            optionsName !== '' && $('.upload_types_' + optionsName).show();
        });


        $('.example-from').validate({
            ignore: ".ignore",    // 插件默认不验证隐藏元素,这里可以自定义一个不验证的class,即验证隐藏元素,不验证class为.ignore的元素
            focusInvalid: false,  // 禁用无效元素的聚焦
            rules: {
                'base[web_site_title]': {
                    required: true,
                    maxlength: 50,
                },
                'base[web_site_logo]': {
                    required: true,
                },
                'base[web_site_logo_text]': {
                    required: true,
                },
                'uploader[mode]': {
                    required: true,
                },
                'uploader[image_ext]': {
                    required: true,
                },
                'uploader[image_size]': {
                    required: true,
                },
                'uploader[file_ext]': {
                    required: true,
                },
                'uploader[file_size]': {
                    required: true,
                },
            },
            errorPlacement: function errorPlacement(error, element) {
                var $parent = $(element).parents('.form-group');
                if ($parent.find('.invalid-feedback').length) {
                    return;
                }
                $(element).addClass('is-invalid');
                $parent.append(error.addClass('invalid-feedback'));
            },
            highlight: function(element) {
                var $el = $(element);
                if ($el.hasClass('js-tags-input')) {
                    $el.next('.tagsinput').addClass('is-invalid');  // tags插件所隐藏的输入框没法实时验证，比较尴尬
                }
            },
            unhighlight: function(element) {
                $(element).next('.tagsinput').removeClass('is-invalid');
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                let l = $('body').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'lg'
                });
                post("{:url('/admin/setting/save')}", $(form).serialize()).success(res => {
                    if(res.code === 200){
                        setTimeout(function () {
                            l.destroy();
                            window.location.href = ''
                        }, 500);
                    }else{
                        l.destroy();
                    }
                }).error();
            }
        });
    });
</script>

<script>
    let uploader;

    /*
     * 示例上传成功采用返回ID的形式，即上传成功以附件表形式存储，返回给前端ID值。
     * 成功返回示例：{"status":200,"info":"成功","class":"success","id":1,"picurl":".\/upload\/images\/lyear_5ddfc00174bbb.jpg"}
     * 这里设定单图上传为js-upload-image，多图上传为js-upload-images
     * 存放预览图的div元素，命名：file_list_*；后面的上传按钮的命名：filePicker_*（这里的*跟隐藏的input的name对应）。方便单页面中存在有多个上传时区分以及使用。
     * input上保存上传后的图片ID以及设置上传时的一些参数，
     */
    $('.js-upload-image').each(function() {
        var $input_file      = $(this).find('input'),
            $input_file_name = $input_file.data('name'),
            // $multiple        = $input_file.data('multiple'),  // 是否选择多个文件
            $ext             = $input_file.data('ext'),       // 支持的文件后缀，示例以图片为例
            $size            = $input_file.data('size');      // 支持最大的文件大小
        var $file_list = $('#file_list_' + $input_file_name);
        var ratio = window.devicePixelRatio || 1;
        var thumbnailWidth = 165 * ratio;
        var thumbnailHeight = 110 * ratio;

        uploader = WebUploader.create({
            auto: true,
            duplicate: true,
            resize: false,
            swf: '{:HTTP_STATIC_ADMIN_CDN_URL}/js/webuploader/Uploader.swf',
            server: "{:url('/admin/common/upload/image')}",
            pick: {
                id: '#picker_' + $input_file_name,
                multiple: false
            },
            fileSingleSizeLimit: $size,
            accept: {
                title: 'Images',
                extensions: $ext,
                mimeTypes: 'image/*'
            }
        });

        uploader.on('fileQueued', function(file) {

            var $li = $('<li class="col-6 col-sm-3 col-md-2 list-images-item" id="' + file.id + '">' +
                    '  <figure>' +
                    '    <img>' +
                    '    <figcaption>' +
                    '      <a class="btn btn-round btn-primary btn-link-pic" href="#!"><i class="mdi mdi-eye"></i></a>' +
                    '      <a class="btn btn-round btn-danger btn-remove-pic" href="#!"><i class="mdi mdi-delete"></i></a>' +
                    '    </figcaption>' +
                    '  </figure>' +
                    '</li>'),
                $img = $li.find('img');

            // if ($multiple) {
            //     $file_list.append($li);
            // } else {
                $file_list.html($li);
                $input_file.val('');
            // }
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
            $('<div class="progress progress-sm"><div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div></div>').appendTo($li);
        });
        uploader.on('uploadProgress', function(file, percentage) {
            var $percent = $('#' + file.id).find('.progress-bar');
            $percent.css('width', percentage * 100 + '%');
        });
        uploader.on('uploadSuccess', function(file, response) {
            var $li = $('#' + file.id);
            if (response.code === 200) { // 返回200成功，这里可以根据你自己的返回状态值自己设置
                // if ($multiple) {
                //     if ($input_file.val()) {
                //         $input_file.val($input_file.val() + '|' + response.data.url);
                //     } else {
                //         $input_file.val(response.data.url);
                //     }
                //     $li.find('.btn-remove-pic').attr('data-id', response.data.url);
                // } else {
                    uploader.refresh();
                    $input_file.val(response.data.url);
                    $li.find('a.btn-link-pic').attr('href', response.data.url);
                // }
            }else{
                showErrorNotify(response.msg);
            }
        });
        uploader.on('uploadError', function(file) {
            var $li = $('#' + file.id);
            $('<div class="bg-danger error">上传失败</div>').appendTo($li);
        });
        uploader.on('error', function(type) {
            switch (type) {
                case 'Q_TYPE_DENIED':
                    showErrorNotify('图片类型不正确，只允许上传后缀名为：' + $ext + '，请重新上传！');
                    break;
                case 'F_EXCEED_SIZE':
                    showErrorNotify('图片不得超过' + ($size / 1024) + 'kb，请重新上传！');
                    break;
            }
        });
        uploader.on('uploadComplete', function(file) {
            setTimeout(function() {
                $('#' + file.id).find('.progress').remove();
            }, 500);
        });
        // 删除操作
        $file_list.delegate('.btn-remove-pic', 'click', function() {
            if (confirm("你确认要删除该图片吗?")) { // 可改为对话框插件
                // if ($multiple) {
                //     var id = $(this).data('id'),
                //         ids = $input_file.val().split(',');
                //     if (id) {
                //         for (var i = 0; i < ids.length; i++) {
                //             if (ids[i] == id) {
                //                 ids.splice(i, 1);
                //                 break;
                //             }
                //         }
                //         $input_file.val(ids.join(','));
                //     }
                // } else {
                    $input_file.val('');
                // }
                $(this).closest('.list-images-item').remove();
            }
        });
        // 接入图片查看插件
        $(this).magnificPopup({
            delegate: 'a.btn-link-pic',
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    });
</script>